<template>
    <div class="container">
        <div class="breadcrumb">
            索引列表
        </div>
        <div class="mt20"></div>
        <!-- 搜索条件 -->
        <n-form :model="queryState" label-placement="left" label-width="auto" autocomplete="off">
            <n-form-item name="keyword">
                <n-input v-model:value="queryState.keyword" placeholder="根据index名搜索">
                    <template #suffix>
                        <n-icon class="pointer" :component="SearchOutlined" @click="onQuery" />
                    </template>
                </n-input>
            </n-form-item>
        </n-form>

        <!-- 数据表 -->
        <n-data-table remote pagination-behavior-on-filter="first" :columns="columns" :data="dataSource" striped />

    </div>
</template>

<script setup lang="ts">
import { SearchOutlined } from '@vicons/antd';
import { NButton } from 'naive-ui';
import { h, reactive } from "vue";
import { useRouter } from 'vue-router';
import { getIndices } from "../../config/api";
const router = useRouter();

const queryState = reactive({
    keyword: '',
});

const onQuery = () => {
    dataSource.length = 0;
    let nd = records.filter((i:any) => i.index.indexOf(queryState.keyword) > -1);
    Object.assign(dataSource,nd);
}

const columns = [
    { title: 'Index', key: 'index', sorter: false },
    { title: 'Docs', key: 'docs.count', sorter: false },
    { title: 'Del Docs', key: 'docs.deleted', sorter: false },
    { title: 'Size', key: 'store.size', sorter: false },
    { title: '主分片大小', key: 'pri.store.size', sorter: false },
    { title: 'Health', key: 'health', sorter: false },
    { title: 'Status', key: 'status', sorter: false },
    {
        title: '操作', key: 'action', render(row: any) {
            return h('div', { class: 'flex items-center' }, [
                h(NButton, { size: 'small', class: 'm2',type: 'info', onClick: () => onClickQuery(row.index) }, { default: () => '搜索' }),
            ])
        }
    },
];

const onClickQuery = (index:string) => {
    router.push({path:'/query',query:{i:index}})
}

let records = reactive([]);
let dataSource = reactive([]);

getIndices().then(res => {
    if (res.data?.length) {
        Object.assign(dataSource, res.data);
        records = res.data;
    }
})

</script>